<template>
  <!-- 引用树弹窗 -->
  <a-modal
    centered
    :title="title"
    :visible.sync="dialogVisible"
    width="550px"
    @cancel="handleCancel"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <div class="tree-wrapper">
      <tree-search
        v-if="dialogVisible"
        ref="treeSearchModal"
        :replaceFields="{ children: 'children', title: 'groupName', key: 'id' }"
        :api="api"
        :addCount="false"
        emptyDescription="暂无数据"
        :query="{ year: requestArgs.year, projectId: requestArgs.projectId }"
        @loader="loader"
        :autoSelect="false"
        :showNode="true"
        checkable
        :outCheckedKeys.sync="checkedKeys"
        :selectOptions.sync="selectOptions"
      />
    </div>
  </a-modal>
</template>

<script>
import { getQuoteTreeList } from '@/api/technical/specificationList'
import TreeSearch from '../TreeSearch' // 树
export default {
  components: {
    TreeSearch
  },

  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    outCheckedKeys: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: '引用分类'
    },

    // 请求参数
    requestArgs: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    // 与父组件绑定visible
    dialogVisible: {
      get: function() {
        return this.visible
      },
      set: function(e) {
        this.$emit('update:visible', e)
      }
    }
  },
  data() {
    return {
      selectedKeys: [],
      checkedKeys: [],
      selectOptions: {},
      confirmLoading: false,
      api: {
        getList: getQuoteTreeList
      }
    }
  },

  methods: {
    treeCheck() {},
    loader() {},
    handleOk() {
      this.$emit('confirm', this.checkedKeys)
    },
    handleCancel() {
      this.dialogVisible = false
    }
  },

  watch: {
    visible(e) {
      if (e) {
        this.checkedKeys = this.$clone(this.outCheckedKeys)
        !this.$refs.treeSearchModal &&
          this.$nextTick(() => {
            
            this.$refs.treeSearchModal.getList()
          })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
